<template>
	<div class="yh_content foSi14">
		<div class="">
			<div>
				<div class="foSi13" style="height: 20px;color: #838383;">统计时间</div>
				<div class="dis">
					<div class="time-cycle__item time-first" @click.stop="statisticsClick(1)" :class="timeStatistics === 1?'curr':''">本月</div>
					<div class="time-cycle__item" @click.stop="statisticsClick(2)" :class="timeStatistics === 2?'curr':''">最近3个月</div>
					<div class="time-cycle__item time-last" @click.stop="statisticsClick(3)" :class="timeStatistics === 3?'curr':''">最近6个月</div>
					<el-date-picker v-model="birthday_start" style="width: 140px;margin-left: 5px;"
						size="small" type="date" placeholder="开始时间" @change="timeChange" :picker-options="{disabledDate:dateOptions}" />
					<el-date-picker v-model="birthday_end" style="width: 140px;margin-left: 5px;"
						size="small" type="date" placeholder="截至日期" @change="timeChange" :picker-options="{disabledDate:dateOptions}" />
				</div>
			</div>
			<div class="dis mar-top10">
				<div>
					<div class="foSi13" style="height: 20px;color: #838383;">会籍顾问</div>
					<el-select v-model="membership" style="width: 140px" size="small" placeholder="不指定">
						<el-option v-for="(item,index) in membershipList" :key="index" :label="item.name"
							:value="item.id" />
					</el-select>
				</div>
				<div class="mar-left10">
					<div class="foSi13" style="height: 20px;color: #838383;">消费项目</div>
					<el-select v-model="consumption" style="width: 140px" size="small" placeholder="请选择">
						<el-option v-for="(item,index) in consumptionList" :key="index" :label="item.name"
							:value="item.id" />
					</el-select>
				</div>
				<div class="mar-left10" style="padding-top: 20px;">
					<el-button type="primary" class="bac6b7" size="small" @click.stop="suosouClick">查询</el-button>
					<el-button type="primary" class="mar-left5 bac6b7" size="small">导出报表</el-button>
				</div>
			</div>
		</div>
		<div style="margin-top: 20px">
			<el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
				<div slot="empty" class="m-empty-box">
					<div class="mar" style="width: 168px;height: 180px;">
						<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
					</div>
					<div class="title">暂无数据</div>
				</div>
				<el-table-column prop="name" label="商品名称	" width="110"/>
				<el-table-column prop="name" label="项目名称	"  width="110"/>
				<el-table-column prop="name" label="购买人"  width="110"/>
				<el-table-column prop="name" label="实付金额	"  width="110"/>
				<el-table-column prop="name" label="服务费"  width="110"/>
				<el-table-column prop="name" label="商家预估入账"  width="110"/>
				<el-table-column prop="name" label="支付状态	"  width="110"/>
				<el-table-column prop="name" label="发卡状态	"  width="110"/>
				<el-table-column prop="name" label="支付流水号"  width="110"/>
				<el-table-column prop="name" label="交易日期	"  width="110"/>
				<el-table-column prop="name" label="支付方式	"  width="110"/>
				<el-table-column prop="name" label="会籍顾问	"  width="110"/>
				<el-table-column prop="name" label="交易来源	"  width="110"/>
				<el-table-column prop="name" label="操作人	"  width="110"/>
				<el-table-column :label="$t('table.actions')" align="center" width="110"
					class-name="small-padding fixed-width">
					<template slot-scope="scope"></template>
				</el-table-column>
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getList" />
		</div>
	</div>
</template>

<script>
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	// import fetchList from '@/api/article'
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		getConsultant
	} from '@/api/member'
	export default {
		name: 'statisticsIncome',
		components: {
			Pagination
		},
		data() {
			return {
				timeStatistics: 1,
				birthday_start: '',
				birthday_end: '',
				membershipList: [],
				membership: null,
				consumptionList: [{
					id: 1,
					name: '发卡'
				}, {
					id: 2,
					name: '续卡'
				}, {
					id: 3,
					name: '卡升级'
				}],
				consumption: null,
				list: [],
				total: 0,
				listLoading: false,
				listQuery: {
					page: 1,
					limit: 10
				},
				// 选择今天及今天以后的日期
				dateOptions(time) {
					return time.getTime() >= Date.now() - 8.64e6;
				},
				dateOptions1(time) {
					return time.getTime() < Date.now() - 8.64e7;
				}
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '扫码收款统计',
				url: '/finance/statisticsIncome',
				pd: true
			}, {
				name: '付费约课收款统计',
				url: '/finance/statisticsIncomeForOrder',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			getConsultant().then(response => {
				const {
					data
				} = response
				this.membershipList = data
			});
			this.timeCreated(1)
			this.getList()
		},
		methods: {
			suosouClick(){
				this.listQuery.page = 1
				this.getList()
			},
			getList(){},
			timeCreated(index){
				var now = new Date();
				var month = now.getMonth();
				var year = now.getFullYear();
				var first = new Date(year, month, 1);
				var three_first = new Date(month<2?year-1:year, month<2?12-2+month:month-2, 1);
				var six_first = new Date(month<5?year-1:year, month<5?12-5+month:month-5, 1);
				if(index === 1){
					this.birthday_start = first
				}else if(index === 2){
					this.birthday_start = three_first
				}else{
					this.birthday_start = six_first
				}
				this.birthday_end = now
			},
			statisticsClick(index){
				if(index !== this.timeStatistics){
					this.timeStatistics = index
					this.timeCreated(index)
				}
			},
			timeChange(e){
				this.timeStatistics = 0
			}
		}
	}
</script>

<style scoped>
	.yh_content {
		padding: 20px;
	}
	.time-first {
	    border-radius: 4px 0 0 4px;
	}
	.time-last {
		border-radius: 0 4px 4px 0;
	}
	.time-cycle__item {
	    position: relative;
	    margin-left: -1px;
	    width: 72px;
	    height: 32px;
	    line-height: 32px;
	    text-align: center;
	    color: #787878;
	    border: 1px solid #d9d9d9;
	    cursor: pointer;
	}
	.time-cycle__item.curr {
	    border: 1px solid #6b7cdd;
	    color: #6b7cdd;
	    z-index: 2;
	}
	::v-deep .el-table--scrollable-x .el-table__body-wrapper {
	    scrollbar-width: thin;
	}
</style>